<!-- 学社 - 学社主页 - 学习成长组件 -->
<template>
  <view class="px-4">
    <!-- 顶部信息 -->
    <view class="flex h-80 mt-5">
      <u-image shape="circle" width="80" height="80" :src="data?.avatar" @click="toHomePage(data.user_id)"></u-image>
      <view class="flex-1 flex flex-col justify-between ml-3 h-76 text-single">
        <view class="flex items-center">
          <view class="c-#333 text-32 text-single" @click="toHomePage(data.user_id)">{{ data?.nickname }}</view>
          <view v-if="data.member_position > 0" class="flex-shrink-0 tag-identity ml-1 mr-2">{{ identity }}</view>
          <image v-if="data.vip_level > 0" mode="aspectFit"
            :class="['flex-shrink-0', data.vip_level > 1 ? 'w-140 h-40' : 'w-112 h-28']"
            :src="`/static/images/user/ic_vip_tag_${vipIcon}.png`" />
        </view>
        <view class="c-#999 text-24">{{ data?.createtime }}</view>
      </view>
      <!-- 社长管理员才能操作 -->
      <view v-if="member_position >= 2" class="flex justify-end flex-shrink-0 ml-2">
        <view class="btn-top" @click="onTopSwitch(data.id, data.is_top)">{{ data.is_top ? '取消置顶' : '置顶' }}</view>
      </view>
    </view>
    <!-- @信息 -->
    <view class="mt-3">
      <text v-for="(item, index) in data.at_info" :key="index" class="c-#F4AF22 mr-2 text-sm"
        @click="toHomePage(item.id)">@{{ item.nickname }}</text>
      <text>{{ data?.remark }}</text>
    </view>
    <!-- 学习成长-课程 -->
    <template v-if="data.type == 1">
      <scroll-view class="whitespace-nowrap w-full" scroll-x :show-scrollbar="false">
        <view v-for="(item, index) in data.class_info" :key="index"
          :class="['scroll-view-item', data.class_info && data.class_info.length > 1 ? 'w-620 mr-3' : 'w-686']">
          <view class=" flex p-4 bg-#F5F5F5 mt-3 rounded-md"
            @click="navigate(`/package_square/pages/course/detail?fromType=society&id=${item.class_id}`)">
            <u-image width="210" height="140" border-radius="12" :src="item.curriculum?.cover_image"
              class="mr-4 flex-shrink-0" />
            <view class="flex-1 flex flex-col justify-between h-140 text-single">
              <view class="c-#333 text-28 font-bold text-single">{{ item?.curriculum?.class_name }}</view>
              <view>
                <view class="c-#B5B5B5 text-24 text-single mb-1">{{ item?.curriculum?.desc }}</view>
                <view class="flex">
                  <view class="flex-1 flex items-center text-single">
                    <u-image width="32" height="32" shape="circle" :src="item?.curriculum?.teacher_image" />
                    <view class="c-#999 text-26 text-single ml-1">{{ item?.curriculum?.teacher_name }}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <!-- 观看人数/完成率 -->
          <view v-if="member_position >= 2" class="flex items-center mt-2"
            @click="navigate(`/package_society/pages/course/status?fromType=course&id=${item.class_id}&club_id=${club_id}`)">
            <view class="c-#333 text-24">{{ item?.study_num }}人观看</view>
            <view class="bg-#333 w-2 h-28 mx-2" />
            <!-- 社长/管理员可看 -->
            <view class="c-#333 text-24">
              完成率{{ Number(item?.compete_rate).toFixed(0) }}%</view>
            <view class="mx-2 flex items-center c-#F4AF22 text-24">
              <view class="mr-2">查看详情</view>
              <image class="w-14 h-24 mt-.5" src="/static/images/home/ic_more_yellow.png"></image>
            </view>
          </view>
        </view>
      </scroll-view>
    </template>
    <!-- 学习成长-考试 -->
    <template v-if="data.type == 2">
      <view class=" flex p-2 bg-#F5F5F5 rounded-md mt-3"
        @click="navigate(`/package_society/pages/exam/detail?exam_id=${data.exam_id}&club_id=${club_id}`)">
        <u-image class="mr-2" width="92" height="92" border-radius="12"
          src="/package_society/static/images/img_cover_exam.png"></u-image>
        <view class="flex-1 flex items-center h-92 text-single">
          <view class="c-#333 text-28 font-bold text-single">{{ data.exam_info?.exam?.paper_name }}</view>
        </view>
      </view>
      <!-- 观看人数/完成率 -->
      <view v-if="member_position >= 2" class="flex items-center mt-2"
        @click="navigate(`/package_society/pages/course/status?fromType=exam&id=${data.exam_id}&club_id=${club_id}`)">
        <view class="c-#333 text-24">{{ data.exam_info?.join_num }}人参加</view>
        <view class="bg-#333 w-2 h-28 mx-2" />
        <view class="c-#333 text-24">考试次数 {{ data.exam_info?.exam_num }}</view>
        <view class="bg-#333 w-2 h-28 mx-2" />
        <!-- 社长/管理员可看 -->
        <view v-if="member_position >= 2" class="c-#333 text-24">{{
          data.exam_info?.pass_num }}人合格</view>
        <view class="mx-2 flex items-center c-#F4AF22 text-24">
          <view class="mr-2">查看详情</view>
          <image class="w-14 h-24 mt-.5" src="/static/images/home/ic_more_yellow.png"></image>
        </view>
      </view>
    </template>

  </view>
</template>
<script setup>
import { navigate, showToast } from "@/common/util/uni";
import { societyIdentity, vipLevels } from '@/common/constant/society.js'
import { toHomePage } from "@/common/util/util";
import { postWorkSetTop } from "@/common/http/module/society.js"

const props = defineProps({
  data: Object,
  club_id: [String, Number],
  member_position: [String, Number],  // 用户在该学社身份
})
const emit = defineEmits(['refresh'])

// 身份&会员标签
const vipIcon = computed(() => vipLevels.find(v => v.value == props.data.vip_level)?.icon)
const identity = computed(() => societyIdentity.find(v => v.value == props.data.member_position)?.label)

// 是否置顶
function onTopSwitch (work_id, is_top) {
  postWorkSetTop({
    work_id: work_id,
    action: is_top ? 'cancel' : 'top'
  }).then(() => {
    showToast(`${is_top ? '取消置顶' : '置顶'}成功`)
    emit('refresh')
  })
}
</script>

<style lang="scss" scoped>
.btn-top {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6rpx 20rpx;
  height: 48rpx;
  border-radius: 12rpx;
  background: linear-gradient(-180deg, rgba(248, 220, 97, 1) 0%, rgba(244, 174, 32, 1) 100%);
  color: #FFFFFF;
  font-size: 28rpx;
}

.item-card {
  padding: 32rpx;
  border-radius: 12rpx;
  background-color: #FFFFFF;
  box-shadow: -1.2246468525851679e-16px 2px 6px 0px rgba(206, 143, 12, 0.1);
}

.scroll-view-item {
  display: inline-block;
}

.scroll-view-item:last-child {
  margin-right: 0;
}
</style>

